<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>接龙任务历史</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { background: #f8f9fa; font-size: 1.08rem; }
        .container { max-width: 1000px; margin: 0 auto; }
        @media (max-width: 600px) {
            body { font-size: 0.98rem; }
            .container { max-width: 99vw; padding: 0 2vw; }
            .navbar-brand { font-size: 1.1rem; }
            .form-control, .btn, .form-text, th, td { font-size: 0.98rem; }
            .table { font-size: 0.95rem; }
            .table thead th, .table tbody td { padding: 0.3rem 0.2rem; }
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">逐光帮会管理系统</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link" href="/">考勤上传</a></li>
        <li class="nav-item"><a class="nav-link" href="/attendance_table">总考勤表</a></li>
        <li class="nav-item"><a class="nav-link" href="/jielong_admin">接龙任务管理</a></li>
        <li class="nav-item"><a class="nav-link active" href="/jielong/history">接龙历史</a></li>
      </ul>
      <div class="d-flex">
        <a class="btn btn-outline-secondary" href="/logout">退出登录</a>
      </div>
    </div>
  </div>
</nav>
<div class="container">
    <h2 class="mb-4">接龙任务历史</h2>
    <div class="table-responsive">
      <table class="table table-bordered table-hover">
          <thead class="table-light">
              <tr>
                  <th>Session ID</th>
                  <th>创建时间</th>
                  <th>原始文本</th>
                  <th>Debug Log</th>
                  <th>Report JSON</th>
                  <th>Output.txt</th>
              </tr>
          </thead>
          <tbody>
          {% for session_id, raw_text, created_at, debug_log, report_json, output_txt in tasks %}
              <tr>
                  <!-- Session ID -->
                  <td style="word-break:break-all;max-width:90px;"><code>{{ session_id }}</code></td>
                  <!-- 创建时间 -->
                  <td style="min-width:90px;">{{ created_at }}</td>
                  <!-- 原始文本 -->
                  <td style="max-width:120px;word-break:break-all;">
                    <button class="btn btn-sm btn-info mb-1" type="button" data-bs-toggle="modal" data-bs-target="#rawModal-{{ session_id }}">查看</button>
                    <div class="modal fade" id="rawModal-{{ session_id }}" tabindex="-1" aria-labelledby="rawModalLabel-{{ session_id }}" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="rawModalLabel-{{ session_id }}">原始文本</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <pre style="max-width:100vw;max-height:60vh;overflow:auto;white-space:pre-wrap;">{{ raw_text }}</pre>
                          </div>
                        </div>
                      </div>
                    </div>
                  </td>
                  <!-- Debug Log -->
                  <td style="min-width:90px;">
                    {% if debug_log %}
                      <a class="btn btn-sm btn-success mb-1" href="/jielong/download_debug/{{ session_id }}">下载</a>
                      <button class="btn btn-sm btn-info mb-1" type="button" data-bs-toggle="modal" data-bs-target="#logModal-{{ session_id }}">查看</button>
                      <div class="modal fade" id="logModal-{{ session_id }}" tabindex="-1" aria-labelledby="logModalLabel-{{ session_id }}" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title" id="logModalLabel-{{ session_id }}">Debug Log</h5>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                              <pre style="max-width:100vw;max-height:60vh;overflow:auto;white-space:pre-wrap;">{{ debug_log }}</pre>
                            </div>
                          </div>
                        </div>
                      </div>
                    {% else %}
                      <span class="text-muted">无</span>
                    {% endif %}
                  </td>
                  <!-- Report JSON -->
                  <td style="min-width:90px;">
                    {% if report_json %}
                      <a class="btn btn-sm btn-success mb-1" href="/jielong/download_report/{{ session_id }}">下载</a>
                      <button class="btn btn-sm btn-info mb-1" type="button" data-bs-toggle="modal" data-bs-target="#reportModal-{{ session_id }}">查看</button>
                      <div class="modal fade" id="reportModal-{{ session_id }}" tabindex="-1" aria-labelledby="reportModalLabel-{{ session_id }}" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title" id="reportModalLabel-{{ session_id }}">Report JSON</h5>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                              <pre style="max-width:100vw;max-height:60vh;overflow:auto;white-space:pre-wrap;">{{ report_json }}</pre>
                            </div>
                          </div>
                        </div>
                      </div>
                    {% else %}
                      <span class="text-muted">无</span>
                    {% endif %}
                  </td>
                  <!-- Output.txt -->
                  <td style="min-width:90px;">
                    {% if output_txt %}
                      <a class="btn btn-sm btn-success mb-1" href="/jielong/download_output/{{ session_id }}">下载</a>
                      <button class="btn btn-sm btn-info mb-1" type="button" data-bs-toggle="modal" data-bs-target="#outputModal-{{ session_id }}">查看</button>
                      <div class="modal fade" id="outputModal-{{ session_id }}" tabindex="-1" aria-labelledby="outputModalLabel-{{ session_id }}" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title" id="outputModalLabel-{{ session_id }}">Output.txt</h5>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                              <pre style="max-width:100vw;max-height:60vh;overflow:auto;white-space:pre-wrap;">{{ output_txt }}</pre>
                            </div>
                          </div>
                        </div>
                      </div>
                    {% else %}
                      <span class="text-muted">无</span>
                    {% endif %}
                  </td>
              </tr>
          {% endfor %}
          </tbody>
      </table>
    </div>
    <a class="btn btn-secondary mt-3" href="/jielong_admin">返回接龙管理</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
